<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link href="http://static.aceona.com/app_css/global.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_layout.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_view_v2.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_table_v2.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_form_v2.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_ui_widgets.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/api_demo/css/api_common.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_widgets_new.css" rel="stylesheet" type="text/css" />
		<link href="http://static.aceona.com/app_css/app_ui_widgets.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
            button {
                margin:0 12px
            }
		</style>
		<script type="text/javascript" src="http://static.aceona.com/app_js/jquery.js"></script>
		<script type="text/javascript" src="http://static.aceona.com/app_js/app_widgets/app_widgets_loader.js"></script>
		<script>
            function load() {
                using(['Ace.Widget.jAlert'], function() {
                    jAlert("普通方式进行加载模块","温馨提示");
                });
            }

            //自己定义模块的方式
            /*
             AceLoader.modules = $.extend({}, {
             "Ace.Widget.jAlert": {
             css:'http://static.aceona.com/app_js/plugins_alerts/jquery.alerts.css',
             js:'http://static.aceona.com/app_js/plugins_alerts/jquery.alerts.js',
             dependencies:["draggable","droppable"]
             },
             "Ace.Widget.Dialog": {
             css:'http://static.aceona.com/app_js/jqueryUI/css/custom-theme/jquery-ui-1.8rc3.custom.css',
             js:'http://static.aceona.com/app_js/jqueryUI/js/jquery-ui-1.8rc3.custom.min.js'
             },
             "Ace.Widget.Loading":{
             js:'http://static.aceona.com/app_js/app_widgets/app_widgets_loading.js'
             }
             },easyloader.modules);
             */
            $( function() {
                $("#jAlert2").click( function() {
                    $.use(['Ace.Widget.jAlert'], function() {
                        jAlert("我是通过事件Bind Click事件方式进行加载","温馨提示");
                    });
                });
                $("#dialog_test").click( function() {
                    using(['Ace.Widget.Dialog'], function() {
                        $('#dialog3').dialog({
                            autoOpen: false,
                            modal: true,
                            resizable:false,
                            width:380
                        });
                        $('#dialog3').dialog('open');
                        // jAlert("测试新增模块","温馨提示");
                    });
                });
                $("#join_test").click( function() {
                    using(['Ace.Widget.Dialog','Ace.Widget.jAlert'], function() {
                        $('#dialog3').dialog({
                            autoOpen: false,
                            modal: true,
                            resizable:false,
                            width:380
                        });
                        $('#dialog3').dialog('open');
                        jAlert("我是跟Dialog一起加载的jAlert组件","温馨提示");
                    });
                });
                $("#J_tips").click( function() {
                    using(['Ace.Widget.Tips'], function() {
                        var newTips=new AceonaTips();
                        newTips.showTips();
                    });
                });
                $("#J_area").click( function() {
                    using(['Ace.Widget.DataType'], function() {
                        $("#J_area").getArea({
                            oDataSource:"http://static.aceona.com/api_demo/api_js/area.xml"
                        });
                    });
                });
            });
		</script>
	</head>
	<body style="padding:100px">
		<h1 class="f_b pad_12 m_b_12">传统的事件点击的时候加载</h1>
		<div class="p_b_12">
			<button type="button" onclick="load()" id="jAlert" class="app_btn_f_v2">
				jAlert组件加载
			</button>
			<button type="button" id="jAlert2" class="app_btn_f_v2">
				jAlert bind事件加载
			</button>
		</div>
		<h2 class="f_b pad_12 m_b_12">加载的一个Dialog组件</h2>
		<div class="p_b_12">
			<button type="button" id="dialog_test" class="app_btn_f_v2">
				dialog组件加载
			</button>
		</div>
		<h2 class="f_b pad_12 m_b_12">一次性加载多个组件</h2>
		<button type="button" id="join_test" class="app_btn_f_v2">
			dialog+jAlert
		</button>
		<h2 class="f_b pad_12 m_b_12">tips调用</h2>
		<button type="button" id="J_tips" class="app_btn_f_v2">
			tips调用
		</button>
		<h2 class="f_b pad_12 m_b_12">地区组件</h2>
		<div class="widgets_w_a app_ui_area_w_a">
			<a class="widgets_a_a app_ui_sp" title="请选择出生地" href="javascript:void(0)" id="J_area">
			<span class="item_slide_r app_ui_sp">请选择地区</span>
			</a>
		</div>
		<div id="loading">
			ss
		</div>
		</div>
		<div id="dialog3" title="请先登录" style="width:200px;height:200px;background:green;display:none">
			我是一个Dialog内容层
		</div>
</html>